<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Hosts编辑器</title>
	<link rel="stylesheet" href="bootstrap.css" />
	<script src="./jquery-1.12.4.min.js"></script>
	<script src="./eejs-api.min.js"></script>
	<style>
	html, body {width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;background: #f0f0f0;}
	#filelist {width: 150px; display: inline-block;}
	label {display: inline-block;}
	.header{ width: 100%; height: 40px; padding: 3px 4px;}
	.footer{ width: 100%; height: calc(100% - 45px); padding: 2px 4px;}
	#editor {
		width: 100%;
		height: 100%;
		padding: 5px;
		background: #000d1a;
		color: #ffffff;
		border: 1px solid #ffcc00;
		font-size: 18px;
		outline: none;
		overflow: auto;
	}
	#editor:focus {border: 1px solid #ff0000;}
	.no {color: #8080ff;}
	</style>
</head>

<body>
	<script type="text/javascript">		
		ee.AppConfig({ "title": "Hosts编辑器", "debug": true, "width": 780,  "height": 520, "max": true, "min": true, "close": true, "resize": true, "border": true });

		$(window).ready(function(){
			loadFileList('hosts');

			readHosts('hosts');

			$('#editor').on('blur', function(){
				render();
			});

			$('#btn-save').on('click', function(){
				saveFile('C:/Windows/System32/drivers/etc/hosts');
			});
			$('#btn-savein').on('click', function(){
				ee.dialogSave({"initDir": "C:/Windows/System32/drivers/etc/","default": "hosts-bak"}, function(ret){
					if(ret.path){
						saveFile(ret.path, true);
					}
				});
			});
			$('#btn-open').on('click', function(){
				ee.fileLocationFile({"path": 'C:/Windows/System32/drivers/etc/hosts'});
			});

			$('#filelist').on('change', function(){
				var file = $('#filelist').val();
				readHosts(file);
			});
		});
		
		function readHosts(name){
			ee.fileReadFile2({'path': 'C:/Windows/System32/drivers/etc/' + name}, function(rt){
				if(rt.value){
					firstRender(ee.utils.unicode4ToAnsi(rt.value));
				}
			});
		}

		function loadFileList(choose){
			ee.fileEnumFile({"dir": "C:/Windows/System32/drivers/etc/", "type": "*"}, function(ret){
				if(ret.list){
					var arr = [];
					for(var i = 0; i < ret.list.length; i++){
						var file = ret.list[i];
						var a = file.toLowerCase();
						if(a.indexOf('hosts') != -1){
							arr.push('<option value="'+file+'" '+(a==choose?'selected':'')+'>' + file + '</option>');
						}
					}
					$('#filelist').html(arr.join('\n'));
				}
			});
		}

		function saveFile(path, tt){
			var str = $('#editor').text();
			ee.fileWriteFile({'path': path, 'data': str}, function(re){
				if(re.status){
					alert('保存成功');
					if(tt){
						var name = path.substring(path.lastIndexOf('/') + 1);
						loadFileList(name);
					}
				}
			});
		}

		function firstRender(data){
			var arr = data.split('\n');
			var lines = [];
			for(var i = 0; i < arr.length; i++){
				if(/^(\s)*#/g.test(arr[i])){
					lines.push('<div class="no">' + arr[i] + '</div>');
				} else {
					lines.push('<div>' + arr[i] + '</div>');
				}
			}
			$('#editor').html(lines.join('\n'));
		}

		function render(){
			var html = $('#editor').html();
			html = html.replace(/<br>/g, "").replace(/<div><\/div>/g, "").replace(/[\r\n\t]/g, "");
			var index = html.indexOf('<div');
			if(index > 0){
				html = '<div>' + html.substring(0, index) + '</div>' + html.substring(index);
			}
			var arr = html.match(/<div[^>/]*>(.*?|\r\n\t)<\/div>/g);
			var lines = [];
			for(var i = 0; i < arr.length; i++){
				var t = $(arr[i]).text();
				if(/^(&nbsp;|\s)*#/g.test(t)){
					lines.push('<div class="no">' + t + '</div>');
				} else {
					lines.push('<div>' + t + '</div>');
				}
			}
			$('#editor').html(lines.join('\n'));
		}
	</script>
	
	<div class="header">
		<label for="filelist">
			文件：<select id="filelist" class="form-control">
				<option value="hosts">hosts</option>
			</select>
		</label>
		<button id="btn-save" class="btn btn-success">保存</button>
		<button id="btn-savein" class="btn btn-warning">另存为..</button>
		<button id="btn-open" class="btn btn-primary">打开hosts目录</button>
		<button class="btn" onclick="document.location.reload()">重新加载</button>
	</div>

	<div class="footer">
		<div id="editor" contenteditable="true"></div>
	</div>
</body>

</html>